<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>文章内容举报受理</title>
  <!-- 引入layui CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layui-src/dist/css/layui.css">
  <!-- 引入Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  <style>
    body {
      background-color: #F8FAFC;
      padding: 20px;
      margin: 0;
    }
    .layui-card {
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
      border-radius: 6px;
      overflow: hidden;
      transition: all 0.3s;
      margin-bottom: 20px;
    }
    .layui-card:hover {
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    }
    .layui-card-header {
      background-color: #F8FAFC;
      border-bottom: 1px solid #F1F5F9;
      padding: 14px 20px;
      font-size: 16px;
      font-weight: 500;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .search-bar {
      padding: 15px 20px;
      background-color: #F8FAFC;
      border-bottom: 1px solid #F1F5F9;
    }
    .layui-form-item {
      margin-bottom: 15px;
    }
    .layui-form-label {
      padding: 9px 15px;
      color: #334155;
      font-weight: 500;
    }
    .layui-input, .layui-select, .layui-textarea {
      border-radius: 4px;
      padding: 9px 15px;
    }
    .layui-btn {
      transition: all 0.2s;
      border-radius: 4px;
      cursor: pointer;
    }
    .layui-table {
      margin: 0;
      border-radius: 0 0 6px 6px;
    }
    .layui-table th {
      font-weight: 500;
      background-color: #F8FAFC;
    }
    .layui-table tr:hover {
      background-color: #F8FAFC;
    }
    .status-badge {
      display: inline-block;
      padding: 3px 10px;
      border-radius: 15px;
      font-size: 12px;
      font-weight: 500;
    }
    .status-unhandled {
      background-color: #FEF3C7;
      color: #D97706;
      border: 1px solid #FDE68A;
    }
    .status-handling {
      background-color: #EFF6FF;
      color: #3B82F6;
      border: 1px solid #DBEAFE;
    }
    .status-handled {
      background-color: #ECFDF5;
      color: #059669;
      border: 1px solid #D1FAE5;
    }
    .operation-btns .layui-btn {
      margin-right: 5px;
    }
    .operation-btns .layui-btn:last-child {
      margin-right: 0;
    }
    .footer {
      text-align: center;
      color: #95A5A6;
      font-size: 12px;
      margin-top: 30px;
      padding-top: 15px;
      border-top: 1px solid #F1F5F9;
    }
    .layui-laypage .layui-laypage-curr .layui-laypage-em {
      background-color: #3B82F6;
    }
    .layui-laypage a:hover {
      color: #3B82F6;
    }
    .report-reason {
      max-width: 200px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .report-stats {
      display: flex;
      flex-wrap: wrap;
      gap: 15px;
      padding: 0 20px 15px;
    }
    .stat-item {
      flex: 1;
      min-width: 150px;
      background-color: #FFFFFF;
      border-radius: 6px;
      padding: 15px;
      text-align: center;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    }
    .stat-value {
      font-size: 24px;
      font-weight: 600;
      color: #1E293B;
      margin: 5px 0;
    }
    .stat-label {
      font-size: 14px;
      color: #64748B;
    }
    .stat-icon {
      font-size: 20px;
    }
    .report-detail-content {
      background-color: #F8FAFC;
      padding: 15px;
      border-radius: 4px;
      margin: 10px 0;
      border: 1px solid #E2E8F0;
    }
    .handling-notes {
      margin-top: 15px;
    }
  </style>
</head>
<body>
  <!-- 统计卡片 -->
  <div class="layui-card">
    <div class="layui-card-header">
      <h3><i class="fa fa-flag"></i> 举报统计</h3>
    </div>
    <div class="layui-card-body">
      <div class="report-stats">
        <div class="stat-item">
          <div class="stat-icon" style="color: #EF4444;"><i class="fa fa-flag"></i></div>
          <div class="stat-value">128</div>
          <div class="stat-label">总举报数</div>
        </div>
        <div class="stat-item">
          <div class="stat-icon" style="color: #F59E0B;"><i class="fa fa-clock-o"></i></div>
          <div class="stat-value">34</div>
          <div class="stat-label">未处理</div>
        </div>
        <div class="stat-item">
          <div class="stat-icon" style="color: #3B82F6;"><i class="fa fa-spinner"></i></div>
          <div class="stat-value">16</div>
          <div class="stat-label">处理中</div>
        </div>
        <div class="stat-item">
          <div class="stat-icon" style="color: #10B981;"><i class="fa fa-check-circle"></i></div>
          <div class="stat-value">78</div>
          <div class="stat-label">已处理</div>
        </div>
      </div>
    </div>
  </div>

  <!-- 举报管理主内容区域 -->
  <div class="layui-card">
    <div class="layui-card-header">
      <h3><i class="fa fa-gavel"></i> 文章内容举报受理</h3>
    </div>
    
    <!-- 搜索区域 -->
    <div class="search-bar layui-form">
      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label">文章标题</label>
          <div class="layui-input-inline" style="width: 200px;">
            <input type="text" name="articleTitle" placeholder="请输入文章标题" autocomplete="off" class="layui-input">
          </div>
        </div>
        <div class="layui-inline">
          <label class="layui-form-label">举报人</label>
          <div class="layui-input-inline" style="width: 150px;">
            <input type="text" name="reporter" placeholder="请输入举报人" autocomplete="off" class="layui-input">
          </div>
        </div>
        <div class="layui-inline">
          <label class="layui-form-label">举报状态</label>
          <div class="layui-input-inline">
            <select name="status">
              <option value="">全部状态</option>
              <option value="unhandled">未处理</option>
              <option value="handling">处理中</option>
              <option value="handled">已处理</option>
            </select>
          </div>
        </div>
        <div class="layui-inline">
          <label class="layui-form-label">举报时间</label>
          <div class="layui-input-inline" style="width: 220px;">
            <input type="text" name="reportTimeRange" placeholder="请选择举报时间范围" autocomplete="off" class="layui-input" id="reportTimeRange">
          </div>
        </div>
        <div class="layui-inline">
          <button class="layui-btn" lay-submit lay-filter="searchBtn"><i class="fa fa-search"></i> 搜索</button>
          <button type="reset" class="layui-btn layui-btn-primary"><i class="fa fa-refresh"></i> 重置</button>
        </div>
      </div>
    </div>
    
    <!-- 举报列表表格 -->
    <table class="layui-table" lay-size="sm">
      <thead>
        <tr>
          <th style="width: 40px;">
            <input type="checkbox" lay-skin="primary" id="checkAll">
          </th>
          <th>举报ID</th>
          <th>文章标题</th>
          <th>举报人</th>
          <th>举报原因</th>
          <th>举报时间</th>
          <th>状态</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <input type="checkbox" lay-skin="primary" data-id="3001">
          </td>
          <td>REP2023001</td>
          <td>深度学习在图像识别中的最新进展与应用</td>
          <td>wangming</td>
          <td>
            <div class="report-reason" title="内容包含未经证实的研究成果">内容包含未经证实的研究成果</div>
          </td>
          <td>2023-09-16 08:45</td>
          <td><span class="status-badge status-unhandled">未处理</span></td>
          <td class="operation-btns">
            <button class="layui-btn layui-btn-primary layui-btn-sm" data-id="3001"><i class="fa fa-eye"></i> 查看</button>
            <button class="layui-btn layui-btn-normal layui-btn-sm" data-id="3001"><i class="fa fa-check"></i> 处理</button>
          </td>
        </tr>
        <tr>
          <td>
            <input type="checkbox" lay-skin="primary" data-id="3002">
          </td>
          <td>REP2023002</td>
          <td>高校科研项目管理系统的设计与实现</td>
          <td>licheng</td>
          <td>
            <div class="report-reason" title="涉嫌抄袭其他系统设计方案">涉嫌抄袭其他系统设计方案</div>
          </td>
          <td>2023-09-15 15:32</td>
          <td><span class="status-badge status-handling">处理中</span></td>
          <td class="operation-btns">
            <button class="layui-btn layui-btn-primary layui-btn-sm" data-id="3002"><i class="fa fa-eye"></i> 查看</button>
            <button class="layui-btn layui-btn-normal layui-btn-sm" data-id="3002"><i class="fa fa-check"></i> 处理</button>
          </td>
        </tr>
        <tr>
          <td>
            <input type="checkbox" lay-skin="primary" data-id="3003">
          </td>
          <td>REP2023003</td>
          <td>2023年度人工智能领域学术会议汇总</td>
          <td>zhaoli</td>
          <td>
            <div class="report-reason" title="会议信息不准确，存在错误">会议信息不准确，存在错误</div>
          </td>
          <td>2023-09-14 10:21</td>
          <td><span class="status-badge status-handled">已处理</span></td>
          <td class="operation-btns">
            <button class="layui-btn layui-btn-primary layui-btn-sm" data-id="3003"><i class="fa fa-eye"></i> 查看</button>
            <button class="layui-btn layui-btn-primary layui-btn-sm" disabled><i class="fa fa-check"></i> 已处理</button>
          </td>
        </tr>
        <tr>
          <td>
            <input type="checkbox" lay-skin="primary" data-id="3004">
          </td>
          <td>REP2023004</td>
          <td>大数据分析在科研项目评估中的应用研究</td>
          <td>sunjie</td>
          <td>
            <div class="report-reason" title="内容包含不当言论">内容包含不当言论</div>
          </td>
          <td>2023-09-13 16:47</td>
          <td><span class="status-badge status-unhandled">未处理</span></td>
          <td class="operation-btns">
            <button class="layui-btn layui-btn-primary layui-btn-sm" data-id="3004"><i class="fa fa-eye"></i> 查看</button>
            <button class="layui-btn layui-btn-normal layui-btn-sm" data-id="3004"><i class="fa fa-check"></i> 处理</button>
          </td>
        </tr>
        <tr>
          <td>
            <input type="checkbox" lay-skin="primary" data-id="3005">
          </td>
          <td>REP2023005</td>
          <td>研究生学术论文写作指南</td>
          <td>qiuxia</td>
          <td>
            <div class="report-reason" title="内容过时，不符合最新学术规范">内容过时，不符合最新学术规范</div>
          </td>
          <td>2023-09-12 09:18</td>
          <td><span class="status-badge status-handled">已处理</span></td>
          <td class="operation-btns">
            <button class="layui-btn layui-btn-primary layui-btn-sm" data-id="3005"><i class="fa fa-eye"></i> 查看</button>
            <button class="layui-btn layui-btn-primary layui-btn-sm" disabled><i class="fa fa-check"></i> 已处理</button>
          </td>
        </tr>
      </tbody>
    </table>
    
    <!-- 分页区域 -->
    <div style="text-align: right; padding: 15px 20px; border-top: 1px solid #F1F5F9;">
      <div class="layui-box layui-laypage layui-laypage-default">
        <a href="javascript:;" class="layui-laypage-prev layui-disabled">上一页</a>
        <span class="layui-laypage-curr"><em class="layui-laypage-em"></em><em>1</em></span>
        <a href="javascript:;">2</a>
        <a href="javascript:;">3</a>
        <span class="layui-laypage-spr">…</span>
        <a href="javascript:;">13</a>
        <a href="javascript:;" class="layui-laypage-next">下一页</a>
        <span class="layui-laypage-count">共 128 条</span>
      </div>
    </div>
  </div>
  
  <!-- 页脚信息 -->
  <div class="footer">
    © 高校科研社区管理系统 - 版权所有
  </div>

  <!-- 举报详情弹窗 -->
  <div class="layui-modal" id="reportDetailModal" style="display: none; width: 700px; margin-left: -350px;">
    <div class="layui-modal-title">举报详情</div>
    <div class="layui-modal-body" style="padding: 20px; max-height: 500px; overflow-y: auto;">
      <div id="reportDetailContent">
        <!-- 详情内容将通过JS动态填充 -->
      </div>
    </div>
    <div class="layui-modal-footer">
      <button class="layui-btn" id="closeDetailModal">关闭</button>
    </div>
  </div>
  
  <!-- 处理举报弹窗 -->
  <div class="layui-modal" id="handleReportModal" style="display: none; width: 600px; margin-left: -300px;">
    <div class="layui-modal-title">处理举报</div>
    <div class="layui-modal-body" style="padding: 20px;">
      <form class="layui-form" id="handleReportForm">
        <input type="hidden" name="reportId" id="reportId">
        
        <div class="layui-form-item">
          <label class="layui-form-label">处理结果</label>
          <div class="layui-input-block">
            <select name="handleResult" lay-verify="required">
              <option value="">请选择处理结果</option>
              <option value="valid">举报有效</option>
              <option value="invalid">举报无效</option>
              <option value="warning">警告作者</option>
              <option value="edit">要求修改</option>
              <option value="delete">删除文章</option>
            </select>
          </div>
        </div>
        
        <div class="layui-form-item">
          <label class="layui-form-label">处理备注</label>
          <div class="layui-input-block">
            <textarea name="handleNotes" placeholder="请输入处理备注信息" class="layui-textarea" rows="5"></textarea>
          </div>
        </div>
      </form>
    </div>
    <div class="layui-modal-footer">
      <button class="layui-btn layui-btn-primary" id="cancelHandleBtn">取消</button>
      <button class="layui-btn" lay-submit lay-filter="submitHandleBtn">提交处理</button>
    </div>
  </div>

  <!-- 引入layui JS -->
  <script src="https://cdn.jsdelivr.net/npm/layui-src/dist/layui.js"></script>
  <script>
    // 初始化layui模块
    layui.use(['form', 'laydate', 'layer'], function() {
      const form = layui.form;
      const laydate = layui.laydate;
      const layer = layui.layer;
      
      // 渲染表单
      form.render();
      
      // 初始化日期范围选择器
      laydate.render({
        elem: '#reportTimeRange',
        range: true,
        theme: 'molv'
      });
      
      // 全选/取消全选
      form.on('checkbox(#checkAll)', function(data) {
        const checked = data.elem.checked;
        document.querySelectorAll('tbody [type="checkbox"]').forEach(checkbox => {
          checkbox.checked = checked;
        });
        form.render('checkbox');
      });
      
      // 搜索按钮
      form.on('submit(searchBtn)', function(data) {
        // 模拟搜索操作
        layer.msg('搜索条件已提交', {icon: 0, time: 1000});
        return false;
      });
      
      // 查看举报详情
      document.querySelectorAll('.operation-btns .layui-btn-primary:first-child').forEach(btn => {
        btn.addEventListener('click', function() {
          const reportId = this.getAttribute('data-id');
          const tr = this.closest('tr');
          const articleTitle = tr.querySelector('td:nth-child(3)').innerText;
          const reporter = tr.querySelector('td:nth-child(4)').innerText;
          const reason = tr.querySelector('.report-reason').title;
          const reportTime = tr.querySelector('td:nth-child(6)').innerText;
          const statusText = tr.querySelector('td:nth-child(7)').innerText;
          
          // 构建详情内容
          const detailContent = `
            <table class="layui-table" lay-size="sm">
              <tr>
                <td style="width: 100px; background-color: #F8FAFC;">举报ID</td>
                <td>${reportId}</td>
              </tr>
              <tr>
                <td style="background-color: #F8FAFC;">文章标题</td>
                <td>${articleTitle}</td>
              </tr>
              <tr>
                <td style="background-color: #F8FAFC;">举报人</td>
                <td>${reporter}</td>
              </tr>
              <tr>
                <td style="background-color: #F8FAFC;">举报原因</td>
                <td>${reason}</td>
              </tr>
              <tr>
                <td style="background-color: #F8FAFC;">举报时间</td>
                <td>${reportTime}</td>
              </tr>
              <tr>
                <td style="background-color: #F8FAFC;">当前状态</td>
                <td>${statusText}</td>
              </tr>
              <tr>
                <td style="background-color: #F8FAFC;">举报内容</td>
                <td>
                  <div class="report-detail-content">
                    该文章中提到的几项研究成果缺乏引用来源，且无法通过权威渠道核实，可能存在虚假宣传嫌疑，建议管理员进行核实并要求作者补充相关证明材料或修正内容。
                  </div>
                </td>
              </tr>
              <tr>
                <td style="background-color: #F8FAFC;">文章摘要</td>
                <td>
                  本文探讨了深度学习在图像识别领域的最新研究进展，分析了几种主流算法的优缺点，并通过实验验证了提出的改进算法在识别精度上的提升。研究结果表明，所提方法在多个公开数据集上均取得了优于现有方法的性能。
                </td>
              </tr>
            </table>
          `;
          
          // 填充详情并显示弹窗
          document.getElementById('reportDetailContent').innerHTML = detailContent;
          document.getElementById('reportDetailModal').style.display = 'block';
        });
      });
      
      // 关闭详情弹窗
      document.getElementById('closeDetailModal').addEventListener('click', function() {
        document.getElementById('reportDetailModal').style.display = 'none';
      });
      
      // 处理举报
      document.querySelectorAll('.operation-btns .layui-btn-normal').forEach(btn => {
        btn.addEventListener('click', function() {
          const reportId = this.getAttribute('data-id');
          const articleTitle = this.closest('tr').querySelector('td:nth-child(3)').innerText;
          
          // 设置举报ID
          document.getElementById('reportId').value = reportId;
          
          // 更新弹窗标题
          document.querySelector('#handleReportModal .layui-modal-title').innerText = 
            `处理举报 - ${articleTitle}`;
          
          // 显示处理弹窗
          document.getElementById('handleReportModal').style.display = 'block';
          
          // 重置表单
          form.render();
        });
      });
      
      // 取消处理
      document.getElementById('cancelHandleBtn').addEventListener('click', function() {
        document.getElementById('handleReportModal').style.display = 'none';
      });
      
      // 提交处理结果
      form.on('submit(submitHandleBtn)', function(data) {
        const reportId = data.field.reportId;
        const handleResult = data.field.handleResult;
        
        // 模拟处理操作
        layer.load();
        
        setTimeout(function() {
          layer.closeAll('loading');
          
          // 隐藏处理弹窗
          document.getElementById('handleReportModal').style.display = 'none';
          
          // 显示成功消息
          layer.msg('举报处理完成', {icon: 1, time: 1500});
          
          // 更新表格中对应举报的状态
          const checkbox = document.querySelector(`input[data-id="${reportId}"]`);
          if (checkbox) {
            const statusCell = checkbox.closest('tr').querySelector('td:nth-child(7)');
            const operationCell = checkbox.closest('tr').querySelector('td:nth-child(8)');
            
            // 更新状态
            statusCell.innerHTML = '<span class="status-badge status-handled">已处理</span>';
            
            // 更新操作按钮
            operationCell.innerHTML = `
              <button class="layui-btn layui-btn-primary layui-btn-sm" data-id="${reportId}"><i class="fa fa-eye"></i> 查看</button>
              <button class="layui-btn layui-btn-primary layui-btn-sm" disabled><i class="fa fa-check"></i> 已处理</button>
            `;
          }
        }, 800);
        
        return false;
      });
    });
  </script>
</body>
</html>
